<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

//    绘制网格
//    网格的大小
    var gridSize = 30;
    var canvasHeight =  ctx.canvas.height;
    var canvasWidth = ctx.canvas.width;
//    画多少条X轴方向的线 横向的条数 画布高度 //    遍历的形式去画
//   1. 拿当前的高度 var canvasHeight = myCanvas.height;
//   2.ctx.canvas.width
    var xLineTotal = Math.floor(canvasHeight / gridSize);
    for (var i = 0; i < xLineTotal; i++) {
        ctx.beginPath();
        ctx.lineTo(0,i*gridSize-0.5);
        ctx.lineTo(canvasWidth,i*gridSize-0.5);
        ctx.strokeStyle = 'blue';
        ctx.stroke();
    }

//    画多少条Y轴方向的线//    遍历的形式去画
    var yLineTotal = Math.floor(canvasWidth/gridSize);
    for (var i = 0; i < yLineTotal; i++) {
        ctx.beginPath();
        ctx.moveTo(i*gridSize-0.5,0);
        ctx.lineTo(i*gridSize-0.5,canvasHeight);
        ctx.strokeStyle = 'blue';
        ctx.stroke();

    }
















</script>
</body>
</html>